@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "Diagnostic Console";
}

@section PageHead {
    <link href="~/Content/Styles/FileBrowser.css" rel="stylesheet" />
    <link href="/Content/Styles/font-awesome.css" rel="stylesheet" />
    <script src="/Content/Scripts/knockout-2.2.1.js" type="text/javascript"></script>
    <script>
        var aceJsLoaded = false;
    </script>
    <script onload="aceJsLoaded = true;" src="https://functionscdn.azureedge.net/public/kudu/libs/ace/1.2.9/ace.js" type="text/javascript"></script>
    <script>
        if (!aceJsLoaded) {
            document.write('<script type="text/javascript" src="/Content/Scripts/ace.js"><\/script>');
        }
    </script>
    <script src="/Content/Scripts/ext-modelist.js" type="text/javascript"></script>
}

<div id="main" class="container">

    <!-- Render toast notifications here -->
    <div id="toast"></div>

    @if (Kudu.Core.Helpers.EnvironmentHelper.IsRunFromPackage())
    {
    <div class="alert alert-warning" role="alert" style="margin-top: 1.2em; width: 90%;">
      Your app is currently in read only mode because you are running from a package file. To make any changes, please update the content in your zip file and WEBSITE_RUN_FROM_PACKAGE app setting.
    </div>}

    <div class="view main-view" data-bind="visible: !fileEdit()">
        <div id="fileList">
            <div id="operations" class="h3" style="position: relative">
                <span data-bind="visible: selected().parent" style="display: none">
                    <a href="#" data-bind="click: selected().selectParent, attr: { title: selected().parent && ('Up to ' + selected().parent.name()) }">...</a> /
                </span>
                <span data-bind="text: selected().name()">/</span>

                <span class="dropdown">
                    <button style="padding: 2px 6px" class="btn dropdown-toggle" type="button" id="new-item-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <i class="glyphicon glyphicon-plus "></i>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="new-item-dropdown">
                        <li><a href="#" id="createFolder">New folder</a></li>
                        <li><a href="#" id="createFile">New file</a></li>
                    </ul>
                </span>

                <span style="color: #ddd; margin-left: 5px; margin-right: 5px">|</span>

                <span data-bind="text: selected().children().length">0</span> items

                <span style="color: #ddd; margin-left: 5px; margin-right: 0">|</span>

                <a class="btn" href="#" data-bind="click: function() { root.selectNode() }">
                    <i class="h4 glyphicon glyphicon-home" title="Home"></i>
                </a>
                <a class="btn" href="#" data-bind="click: function() { selectSpecialDir('LocalSiteRoot') }, visible: showSiteRoot">
                    <i class="h4 glyphicon glyphicon-globe" title="Site Root"></i>
                </a>
                <a class="btn" href="#" data-bind="click: function() { selectSpecialDir('SystemDrive') }">
                    <i class="h4 glyphicon glyphicon-hdd" title="System Drive"></i>
                </a>

                <div class="spinner">
                    <button class="btn btn-info box-border" style="display: none" data-bind="visible: isTransferInProgress(), click: showCopyProgressModal">
                        <span id="copy-percentage" title="percentage copy"></span>
                    </button>
                    <img data-bind="visible: koprocessing()" class="paKman" src="/Content/Images/paKman.gif" title="Please wait" />
                    <i data-bind="visible: errorText, attr: {title: errorText}" class="alert-warning glyphicon glyphicon-exclamation-sign" style="display: none"></i>
                </div>

            </div>
            <div class="table-container">
                <div id="upload-unzip" class="show-on-hover">
                    <div class="zip-upload-text">Drag here to upload and unzip <br /><span class="glyphicon glyphicon-folder-open"></span></div>
                </div>
                <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 10%"></th>
                            <th scope="col" style="width: 55%">Name</th>
                            <th scope="col" style="width: 20%">Modified</th>
                            <th scope="col" style="width: 15%">Size</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: selected().children(), visible: true" style="display: none">
                        <tr>
                            <td class="actions">
                                <div data-bind="visible: !editing()">
                                    <a data-bind="attr: { href: url() }" target="_blank">
                                        <i class="glyphicon glyphicon-download-alt" title="Download"></i>
                                    </a>
                                    <!--
                                        Ace hooks an event handler on glyphicon-pencil.
                                        See ~/content/scripts/ace-init.js
                                    -->
                                    <span data-bind="if: !isDirectory()">
                                        <a data-bind="click: editItem" href="#">
                                            <i class="glyphicon glyphicon-pencil" title="Edit"></i>
                                        </a>
                                    </span>
                                    <a href="#" data-bind="click: deleteItem">
                                        <i class="glyphicon glyphicon-minus-sign" title="Delete"></i>
                                    </a>
                                </div>
                            </td>
                            <td class="name">
                                <span data-bind="if: isDirectory()">
                                    <i class="glyphicon glyphicon-folder-open" title="Folder"></i>&nbsp;
                                    <a href="#" data-bind="click: selectNode, text: name, visible: !editing()" target="_blank"></a>
                                    <input type="text" data-bind="value: name, valueUpdate: 'afterKeyDown', visible: editing()" />
                                </span>
                                <span data-bind="if: !isDirectory()">
                                    <i class="glyphicon glyphicon-file" title="File"></i>
                                    <span data-bind="text: name"></span>
                                    <input type="text" data-bind="value: name, valueUpdate: 'afterKeyDown', visible: editing()" />
                                </span>

                            </td>
                            <td data-bind="text: modifiedTime" class="date"></td>
                            <td data-bind="text: size" class="size"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="resizeHandle">
            <h4>
                <span class="down" title="Slide down"><i class="glyphicon glyphicon-chevron-down"></i></span>
                <span class="up" title="Slide up"><i class="glyphicon glyphicon-chevron-up"></i></span>
            </h4>
        </div>
        <a id="SwitchConsoleLink" href="javascript:SwitchConsole();" class="right"></a>
        <div id="KuduExecConsoleV2" class="left-aligned"></div>

        <!-- File upload progress modal -->
        <div class="modal fade" id="files-transfered-modal" tabindex="-1" role="dialog" aria-labelledby="errorTitle" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="border: 0"></div>
                    <div class="modal-body" data-bind="if: copyProgStats" style='overflow-y: scroll; height:400px; '>

                        <table class="table table-striped table-nonfluid">
                            <tbody data-bind="foreach: { data: Object.keys(copyProgStats()), as: 'item' }">
                                <tr>
                                    <td>
                                        <span style="word-wrap: break-word;" data-bind="text: item"></span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
                                                 aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%"
                                                 data-bind="style: { width: $root.getCopyPercentage($parent.copyProgStats()[item]) + '%' },
                                                 css: { 'progress-bar-info' : $root.getCopyPercentage($parent.copyProgStats()[item]) < 100,
                                                    'progress-bar-success': $root.getCopyPercentage($parent.copyProgStats()[item]) >= 100  },
                                                    text: $root.getCopyPercentageDisplay($parent.copyProgStats()[item])">0%
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer" style="border: 0">
                        <button type="button" class="btn btn-default" data-bind="click: clearCopyProgressCache">Clear</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="view edit-view" data-bind="visible: fileEdit() " style="display: none">
        <div class="form-group">
            <form role="form">
                <p>
                    <button class="btn btn-primary btn-default"
                            style="margin-right: 10px" data-bind="click: function () { return fileEdit().saveItemAndClose(); }">
                        Save
                    </button>
                    <button class="btn" style="margin-right: 10px" data-bind="click: cancelEdit">Cancel</button>
                    <span id="statusbar" class="statusbar"></span>
                    <span id="acehelp" class="btn btn-info right" onclick="showAceHelpModal();">Help</span>
                </p>

                <!-- Ace Help Modal -->
                <div class="modal fade" id="ace-help-modal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header" style="border: 0">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Keyboard Shortcuts</h4>
                            </div>
                            <div class="modal-body">
                                Loading...
                            </div>
                            <div class="modal-footer" style="border: 0">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ace editor starts -->
                <div id="editor" data-bind="ace: editText"></div>
                <!-- Ace editor ends -->
            </form>
        </div>
    </div>
</div>
<script src="~/content/scripts/jquery.signalR-2.1.1.min.js"></script>
<script src="~/content/scripts/kuduexec.js"></script>
<script src="~/content/scripts/kuduexecV2.js"></script>
<script src="~/api/filesystemhub/hubs"></script>
<script src="~/content/scripts/vkbeautify.0.99.00.beta.js"></script>
<script src="~/content/scripts/filebrowser.js"></script>
<script src="~/content/scripts/jquery-console/jquery.console.js"></script>
<script src="~/content/scripts/ace-init.js"></script>
<script src="~/content/scripts/HelperScript.js"></script>
